<template>
    <div>
        <Card>
            <span slot="title">
                订单详情
            </span>
            <div slot="content">
                <el-form ref="form" :model="infoForm" label-width="80px">
                    <!-- 订单号 -->
                    <el-form-item label="订单号">
                        <el-input v-model="infoForm.orderNo" disabled></el-input>
                    </el-form-item>

                    <!-- 下单时间 -->
                    <el-form-item label="下单时间">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="infoForm.orderTime"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                    </el-form-item>

                    <!-- 联系电话 -->
                    <el-form-item label="联系电话">
                        <el-input v-model="infoForm.phone"></el-input>
                    </el-form-item>

                    <!-- 收货人 -->
                    <el-form-item label="收货人">
                        <el-input v-model="infoForm.consignee"></el-input>
                    </el-form-item>

                    <!-- 送货地址 -->
                    <el-form-item label="送货地址">
                        <el-input v-model="infoForm.deliverAddress"></el-input>
                    </el-form-item>

                    <!-- 送达时间 -->
                    <el-form-item label="送达时间">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="infoForm.deliveryTime"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-form-item>

                    <!-- 备注 -->
                    <el-form-item label="备注">
                        <el-input
                            type="textarea"
                            v-model="infoForm.remarks"
                        ></el-input>
                    </el-form-item>

                    <!-- 订单金额 -->
                    <el-form-item label="订单金额">
                        <el-input-number
                            class="numInp"
                            v-model="infoForm.orderAmount"
                            :min="0"
                            :max="999"
                            label="描述文字"
                        ></el-input-number>
                    </el-form-item>

                    <!-- 订单状态 -->
                    <el-form-item label="订单状态">
                        <el-select
                            v-model="infoForm.orderState"
                            placeholder="请选择活动区域"
                        >
                            <el-option
                                label="已完成"
                                value="已完成"
                            ></el-option>
                            <el-option
                                label="已受理"
                                value="已受理"
                            ></el-option>
                            <el-option
                                label="派送中"
                                value="派送中"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="botBtn">
                    <el-button type="primary" @click="onSubmit"
                        >修改</el-button
                    >
                    <el-button @click="back">取消</el-button>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
import Card from "@/components/Card.vue";
import { detail, editOrder } from "@/apis/order.js";
export default {
    components: {
        Card,
    },
    data() {
        return {
            infoForm: {
                orderNo: "",
            },
        };
    },
    methods: {
        async onSubmit() {
            let res = await editOrder(this.infoForm);
            this.$router.push("/order/order-list");
        },

        back() {
            this.$router.push("/order/order-list");
        },

        async getDetail() {
            let { data } = await detail({
                id: JSON.parse(this.$route.query.row).id,
            });
            this.infoForm = data;
        },
    },
    created() {
        this.getDetail();
    },
};
</script>

<style lang="less" scoped>
.el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 100px;
    /deep/.el-input__inner,
    .numInp {
        width: 380px;
    }
    /deep/.el-textarea__inner {
        width: 380px;
    }
}
.botBtn {
    width: 180px;
    margin: auto;
    margin-top: 30px;
}
</style>